<template>
  <el-dialog
    title="解析结果"
    :visible.sync="visible"
    width="800px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div style="height: 50vh; overflow: auto;">
      <el-table
        :data="resultData"
        border
        height="100%"
        @row-click="editRow"
      >
        <!-- 单词全拼 -->
        <el-table-column label="单词全拼">
          <template slot-scope="{ row }">
            <div v-if="row.isEditing">
              <el-input v-model="row.fullSpell"></el-input>
            </div>
            <div v-else>{{ row.fullSpell }}</div>
          </template>
        </el-table-column>

        <!-- 词根 -->
        <el-table-column label="词根">
          <template slot-scope="{ row }">
            <div v-if="row.isEditing">
              <el-input v-model="row.rootSummary"></el-input>
            </div>
            <div v-else>{{ row.rootSummary }}</div>
          </template>
        </el-table-column>

        <!-- 难度等级 -->
        <el-table-column label="难度等级">
          <template slot-scope="{ row }">
            <div v-if="row.isEditing">
              <el-select
                v-model="row.difficultyLevel"
                placeholder="选择难度"
                filterable
                style="width: 120px"
              >
                <el-option
                  v-for="item in levelOptions"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </div>
            <div v-else>{{ row.difficultyLevel }}</div>
          </template>
        </el-table-column>

        <!-- 频次 -->
        <el-table-column label="频次">
          <template slot-scope="{ row }">
            <div v-if="row.isEditing">
              <el-input v-model.number="row.occurrence" @blur="validateOccurrence(row)"></el-input>
            </div>
            <div v-else>{{ row.occurrence }}</div>
          </template>
        </el-table-column>

        <!-- 操作 -->
<!--        <el-table-column label="操作" width="120">-->
<!--          <template #default="{ row }">-->
<!--            <div v-if="row.isEditing">-->
<!--              <el-button type="text" size="mini" @click="saveRow(row)">保存</el-button>-->
<!--              <el-button type="text" size="mini" @click="cancelEdit(row)">取消</el-button>-->
<!--            </div>-->
<!--            <div v-else>-->
<!--              <span style="color: #999;">点击行编辑</span>-->
<!--            </div>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">入库</el-button>
      <el-button @click="$emit('update:visible', false)">关闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addWordBatch } from '@/api/wordSystemWordLibrary'

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    resultData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      levelOptions: [],
      copeEditRow: {}
    }
  },
  created() {
    this.generateLevelOptions()
  },
  methods: {
    generateLevelOptions() {
      this.resultData.forEach(r => this.$set(r, 'isEditing', false))

      this.levelOptions = Array.from({ length: 25 }, (_, i) => `${i + 1}k`)
    },
    editRow(row) {
      if (row.isEditing) {
        return
      }
      // 只允许单行编辑
      for (const item of this.resultData) {
        if (item.isEditing) {
          if (!this.saveRow(item)) {
            return
          }
        }
      }
      this.copeEditRow = { ...row }
      row.isEditing = true
    },
    cancelEdit(row) {
      Object.assign(row, this.copeEditRow)
      row.isEditing = false
    },
    saveRow(row) {
      if (!row.fullSpell) {
        this.$message.error('请输入单词全拼')
        return
      }
      // 去除前后空格 + 去除除括号以外的首尾特殊符号
      row.fullSpell = this.cleanText(row.fullSpell)
      row.difficultyLevel = this.cleanText(row.difficultyLevel)

      // 频次整数校验
      if (row.occurrence) {
        if (!Number.isInteger(row.occurrence) || row.occurrence < 0) {
          this.$message.error('频次必须是 >= 0 的整数')
          return
        }
      }

      row.isEditing = false

      return true
    },
    validateOccurrence(row) {
      if (row.occurrence < 0 || !Number.isInteger(row.occurrence)) {
        this.$message.error('频次必须是 >= 0 的整数')
        row.occurrence = 0
      }
    },
    cleanText(str) {
      if (!str) return ''
      // 保留括号，去除前后空格和除括号外的首尾特殊符号
      return str.trim().replace(/^[^(\w)]+|[^)\w]+$/g, '')
    },
    submit(){
      addWordBatch(this.resultData).then(() => {
        this.$message.success('入库成功')
        this.$emit('update:visible', false)
        this.$emit('refresh')
      })
    }
  }
}
</script>
